<!-- 欠费明细统计报表 -->
<template>
    <div class="eCBAnalysis page">
        <div class="leftContent" :class="dir == 'left' ? 'leftArrow' : 'rightArrow'">
            <img src="@/assets/images/data/28.png" class="phLogo" />

            <div class="searchContent" style="margin-top: 0">
                <timeCard @changeDate="changeDate" />
                <div class="searchItem">
                    <label class="label">账户检索：</label>
                    <div style="width: 200px">
                        <el-input placeholder="请输入帐号" v-model="userId" class="input-with-select" maxlength="20" @input="deviceKeyUp" />
                    </div>
                    <div class="searchUser" v-if="showSearch" @mouseleave="showSearch = false">
                        <searchUser ref="searchUser" @handleCurrentChange="searchChange"></searchUser>
                    </div>
                </div>
                <div class="searchItem">
                    <label class="label">区域建筑：</label>
                    <div style="width: 200px">
                        <treeselect :options="options" v-model="BD_GUID" :show-count="true" placeholder="请选择所属建筑" />
                    </div>
                </div>
                <div class="searchItem">
                    <label class="label">欠费账户：</label>
                    <div style="width: 200px; text-align: left">
                        <el-checkbox v-model="checked"></el-checkbox>
                    </div>
                </div>
                <div class="searchItem">
                    <label class="label">账户类型：</label>
                    <div style="width: 200px">
                        <el-radio-group v-model="radio">
                            <el-radio :label="0">充值账户</el-radio>
                            <el-radio :label="1">公共账户</el-radio>
                            <el-radio :label="-1">透支账户</el-radio>
                        </el-radio-group>
                    </div>
                </div>
                <div class="btns">
                    <el-button size="small" class="btn1" type="primary" @click="submitForm">统计</el-button>
                    <el-button size="small" class="btn2" @click="reset">重置</el-button>
                </div>
            </div>
        </div>
        <div class="rightContent" :class="dir == 'left' ? 'leftTable' : 'rightTable'">
            <div class="right-content-top">
                <div class="rightTitle">
                    <span>欠费明细统计报表</span>
                    <label>
                        <el-dropdown @command="hzClick">
                            <el-button type="primary" style="background-color: #409eff; border-color: #409eff">
                                导出<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="excel">导出为Excel文档</el-dropdown-item>
                                <el-dropdown-item command="word">导出为Word文档</el-dropdown-item>
                                <el-dropdown-item command="pdf">导出为Pdf文档</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </label>

                    <!-- <label> <i class="el-icon el-icon-printer printer"></i>&nbsp;&nbsp;打印 </label> -->
                </div>

                <div class="title">
                    <label>统计时间：</label>
                    <span>{{ getTJTime() }}</span>
                </div>

                <div class="gjw-list">
                    <div>
                        <div class="gjw-list-list">
                            <dSROOFfeesTable ref="tDsReportTable" @footer="getFooter"></dSROOFfeesTable>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <arrowLeft @arrowChange="arrowChange"></arrowLeft>
    </div>
</template>

<script>
// import treeSelect from '@/components/customComponents/customForm/treeSelect.vue'
import {LeftTree} from '@/mockData/monitorCenter.js'
import arrowLeft from '@/components/customComponents/arrowLeft'
import timeCard from '@/components/timeCard/index'
import {Utility} from '@/libs/utility'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import searchUser from '../financialCenter/searchUser'
import {AjaxCommon} from '@/libs/apiCommon'
import dSROOFfeesTable from './components/dSROOFfeesTable'
import {PopupCommon} from '@/libs/popupCommon'
import moment from 'moment'
export default {
    name: 'eCBAnalysis',
    components: {timeCard, Treeselect, arrowLeft, searchUser, dSROOFfeesTable},
    data() {
        return {
            checked: false,
            radio: 0,
            /** 价格方案列表 */
            priceList: [],
            /** 价格id */
            priceId: '',
            userId: '',
            count: 0,
            size: 20,
            BD_GUID: '',
            options: [],
            current: 1,
            searchUser: {},
            showSearch: false,
            tableData: [],
            tableData2: [],
            dir: 'left',
            yearValue: [],
            ylOrJe: 'yl',
            hy: '1',
            mode: 'year',
            // monthrange daterange
            format: 'years',
            timeValue: '',
            curHeight: document.body.clientHeight - 590,
            phIndexs: [2],
            props: {
                // 配置项（必选）
                id: 'id',
                label: 'label',
                pid: 'parentId',
                children: 'children'
                // disabled:true
            },
            treeSelectList: LeftTree,
            parentId: '',
            isClearable: true, // 可清空（可选）
            isAccordion: false, // 可收起（可选）
            type: 'year',
            paramsItem: {}
        }
    },
    computed: {},
    created() {
        this.initParentMenu()
    },
    mounted() {
        // Utility.setPosition()
        setTimeout(() => {
            this.submitForm()
        }, 500)
    },
    methods: {
        hzClick(e) {
            if (this.$refs.tDsReportTable.getAllData().length == 0) {
                PopupCommon.notify('info', '暂无数据')
                return
            }
            this.$refs.tDsReportTable.exportExcel(e)
        },
        getFooter(d) {
            const data = JSON.parse(d)
            // jzmc 增加一个建筑名称的字段
            // this.options    id: '', label: '顶级建筑'
            data.map((t) => {
                t.jzmc = this.BD_GUID ? this.options.find((b) => b.id == this.BD_GUID)?.label : '顶级建筑'
                return t
            })
            this.tableData = data
        },
        // 获取统计时间
        getTJTime() {
            const type = this.type
            let beginTime = ''
            let endTime = ''
            if (type == 'daterange') {
                if (this.timeValue) {
                    beginTime = this.timeValue[0]
                    endTime = this.timeValue[1]
                    return beginTime + ' - ' + endTime
                }
                return ''
            } else {
                if (this.timeValue) {
                    return type == 'year' ? this.timeValue.slice(0, 4) + '年' : moment(this.timeValue).format('YYYY年MM月')
                } else {
                    return ''
                }
            }
        },
        changeDate(item) {
            this.type = item.type
            this.timeValue = item.value
        },
        async initParentMenu() {
            const allBuild = await AjaxCommon(`/api/Build/GetAllBuild`, 'get', null)
            console.log(allBuild)
            const buildList = allBuild?.data?.Message ?? []
            let allBuildTree = []
            if (buildList.length > 0) {
                allBuildTree = Utility.arrayCascade(buildList, (c, p) => c.PARENT_BD_GUID == p.BD_GUID, 'children')
            }
            if (allBuildTree && allBuildTree.length > 0) {
                let treeDataList = []
                Utility.createBuildTreeData(allBuildTree, treeDataList)
                if (treeDataList && treeDataList.length > 0) {
                    this.options = [
                        {
                            id: '',
                            label: '顶级建筑'
                        }
                    ].concat(treeDataList)
                }
            } else {
                this.options = [
                    {
                        id: '',
                        label: '顶级建筑'
                    }
                ]
            }
        },
        searchChange(item) {
            this.searchUser = JSON.parse(item)
            this.showSearch = false
            this.userId = this.searchUser.ac_name
            // 调用右侧接口
            // this.GetDateDivce(this.deviceitem.build_id, this.searchUser.ac_id, 1)
        },
        deviceKeyUp(e) {
            this.showSearch = true
            setTimeout(() => {
                this.$refs.searchUser.initPage(e)
            })
        },
        // 页码点击事件,p当前页
        handleSizeChange(e) {
            this.size = e
            this.current = 1
            // this.initPage()
        },
        // 分页点击事件
        pageChange(p) {
            this.current = p
            // this.initPage()
        },
        // 获取prop属性
        getProp(name, type) {
            var value = ''
            if (type == 1) {
                value = 'd'
            }
            if (type == 2) {
                value = 's'
            }
            if (type == 3) {
                value = 'q'
            }
            if (type == 4) {
                value = 'r'
            }
            return name + value
        },
        getLabel(name, type) {
            var value = ''
            if (type == 1) {
                value = '电'
            }
            if (type == 2) {
                value = '水'
            }
            if (type == 3) {
                value = '气'
            }
            if (type == 4) {
                value = '热'
            }
            return name + value
        },
        arrowChange(e) {
            this.dir = e
        },
        ylChange(yl) {
            this.ylOrJe = yl
        },
        getPh(index) {
            var index1 = this.phIndexs.findIndex((b) => b == index)
            return index1 > -1 ? 'btnItem hover' : 'btnItem'
        },
        async submitForm() {
            const type = this.type
            let ny_type = 'AN'
            let beginTime = ''
            let endTime = ''
            if (type == 'daterange') {
                beginTime = this.timeValue[0].replaceAll('-', '/')
                endTime = this.timeValue[1].replaceAll('-', '/')
                ny_type = 'AQJ'
            } else {
                beginTime = this.timeValue.replaceAll('-', '/')
                ny_type = type == 'year' ? 'AN' : 'AY'
            }
            const BD_GUID = this.BD_GUID
            const ac_guid = this.searchUser?.ac_guid ?? ''
            // api/Payment/GetPayInfoReport
            let params = {
                //    账户类型(0充值账户　1公共账户 -1透支账户)
                ac_ytpe: this.radio == null ? '' : this.radio,
                /** 欠费账户（0否 1选中） */
                ac_qf: this.checked ? 1 : 0,
                /** 查询开始时间（如按年2025-1-1 按月2025-11-1） */
                begin_time: beginTime,
                /** 查询结束时间（按年按月时可不传后台自动处理，按区间必传） */
                end_time: endTime,
                pageIndex: this.current,
                pageSize: this.size
            }
            if (BD_GUID) {
                params.bd_guid = BD_GUID
            }
            if (this.userId) {
                params.ac_name = this.userId
            }
            this.paramsItem = params
            this.$refs.tDsReportTable.getData(params)
            // const res = await AjaxCommon(`/api/Payment/GetPayInfoReport`, 'post', params)
            // if (res?.data?.Code == 200) {
            //     const data = res?.data.Message
            //     this.tableData = data.footer
            //     this.tableData2 = data.rows
            // } else {
            //     this.tableData = []
            //     this.tableData2 = []
            // }
        },
        reset() {
            this.userId = ''
            this.searchUser = {}
            this.BD_GUID = ''
            this.current = 1
            this.size = 20
            this.radio = null
            this.checked = false
            this.submitForm()
        },
        modeChange(mode) {
            this.mode = mode
            this.timeValue = undefined
            if (mode == 'year') {
                this.format = 'year'
            }
            if (mode == 'month') {
                this.format = 'month'
            }
            if (mode == 'day') {
                this.format = 'daterange'
            }
        },
        changePh(index) {
            var phIndexs = this.phIndexs
            var index1 = phIndexs.findIndex((b) => b == index)
            if (index1 > -1) {
                phIndexs.splice(index1, 1)
            } else {
                phIndexs.push(index)
            }
            this.phIndexs = phIndexs
        },
        // 树形选择器 - 取值
        getValue(value) {
            // this.valueId = value
            console.log('getValue', value, this.valueId)
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../../style/statisticsReportCenter.scss';
.searchItem {
    position: relative;
    .searchUser {
        position: absolute;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 7px;
        background-color: #fff;
        padding: 10px;
        top: 33px;
        left: 2px;
        z-index: 9999;
        height: 420px;
        width: 600px;
    }
    .el-radio {
        width: 100%;
        text-align: left;
    }
}
</style>
